<template>
	<view class="ios-bottom">
		<view class="head">
			<!-- 地址 -->
			<view class="head__address flex_y">
				<image class="img48_48 mx50 fg0" src="/static/images/icon/map-pin.png" mode="aspectFill" />
				<view class="fg1">
					<view class="fs28 fw500 t_333 flex_y">黄润平<text class="pl30">18236630012</text>
						<view class="address__tag fjc fw500">默认</view>
					</view>
					<view class="t_666 ellipsis-1 pt16">云南省大理市小庄乡十四户东村4号楼3云南省大理市小庄乡十四户东村4号楼3...</view>
				</view>
				<image class="img36_36 mx30 fg0" src="/static/images/icon/order_arrow_right.png" mode="aspectFill" />
			</view>
			<!-- 列表 -->
			<view class="head__list px30 mt20">
				<GoodsItem />
			</view>
			<!-- 运费优惠券 -->
			<view class="rights px30 mt20 fs28">
				<view class="rights__item fsc" style="border-bottom: 1rpx solid #f8f8f8;">
					<view class="">运费</view>
					<view class="">￥0.00</view>
				</view>
				<view class="rights__item fsc">
					<view class="">优惠券</view>
					<view class="flex_y" @click="show = true">
						<view class="">暂无可用</view>
						<image class="img36_36 ml16 fg0" src="/static/images/icon/order_arrow_right.png" mode="aspectFill" />
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="pay px30 mt20">
			<view class="pay__title fs28 fw500">支付方式</view>
			<view class="pay__item fsc">
				<view class="flex_y">
					<image class="img48_48" src="/static/images/icon/bodian.png" mode="aspectFill" />
					<view class="pl32">
						<view class="fs26 fw500" style="line-height: 26rpx;">爆点支付</view>
						<view class="t_999 pt16">爆点：￥99.62</view>
					</view>
				</view>
				<view class="">
					<view class="uncheck40"></view>
				</view>
			</view>
			<view class="pay__item fsc">
				<view class="flex_y">
					<image class="img48_48" src="/static/images/icon//wechat.png" mode="aspectFill" />
					<view class="pl32">
						<view class="fs26 fw500" style="line-height: 26rpx;">微信支付</view>
						<view class="t_999 pt16">微信：￥99.62</view>
					</view>
				</view>
				<view class="">
					<view class="uncheck40"></view>
				</view>
			</view>
			<view class="pay__item fsc">
				<view class="flex_y">
					<image class="img48_48" src="/static/images/icon/yuer.png" mode="aspectFill" />
					<view class="pl32">
						<view class="fs26 fw500" style="line-height: 26rpx;">余额支付</view>
						<view class="t_999 pt16">余额：￥99.62</view>
					</view>
				</view>
				<view class="">
					<image class="img40_40" src="../../static/images/icon/check_order.png" mode="aspectFill" />
				</view>
			</view>
		</view>
		<!-- 底部事件 -->
		<view class="footer">
			<view class="footer__box ios-bottom px24 fsc">
				<view class="">运费：<text class="fw600 t_FF7803 fs32">￥1000.00</text></view>
				<view class="footer__btn fjc fs28" @click="gopage">确认支付</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<Coupon :show="show" @close="show = false" />
	</view>
</template>

<script>
	import GoodsItem from '../compontents/goodsItem.vue'
	import Coupon from './components/Coupon.vue'
	export default {
		components: {
			GoodsItem,
			Coupon,
		},
		data() {
			return {
				show: false,
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '确认订单 '
			})
		},
		methods: {
			gopage() {
				uni.navigateTo({
					url: '/pagesBag/shipments/shipSuccess'
				})
			}
		}
	}
</script>

<style lang="scss">
	.img40_40 {
		width: 40rpx;
		height: 40rpx;
	}

	.img48_48 {
		width: 48rpx;
		height: 48rpx;
	}

	.img36_36 {
		width: 36rpx;
		height: 36rpx;
	}

	.head {
		&__address {
			height: 134rpx;
			background: #fff;
		}

		&__list {
			background: #fff;
		}

		.address__tag {
			width: 52rpx;
			height: 32rpx;
			margin-left: 32rpx;
			border-radius: 4rpx;
			color: #FF7803;
			background: #F9EBDF;
			font-size: 18rpx;
		}

		.rights {
			background: #fff;

			.rights__item {
				height: 94rpx;
				line-height: 94rpx;
			}
		}

	}

	.pay {
		background: #fff;

		.pay__title {
			height: 98rpx;
			line-height: 98rpx;
		}

		.pay__item {
			height: 108rpx;
		}
	}

	.footer {
		height: 104rpx;

		&__box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: inherit;
			background: #fff;
		}

		&__all {
			height: 40rpx;
			margin-right: 80rpx;

			&__circle {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
				border: 2rpx solid #666;
				border-radius: 50%;
			}
		}

		&__btn {
			width: 240rpx;
			height: 72rpx;
			border-radius: 48rpx;
			color: #fff;
			background: linear-gradient(270deg, #FC4C14 0%, #FD7303 100%);
		}
	}
</style>